<template>
  <div class="login-wp">
  	<div class="content">
  		<img class="logo" src="@/assets/image/logo.png"/>
  		<a-form ref="formRef">
  			<a-form-item v-bind="validateInfos.code">
  				<a-input v-model:value="_d.form.code" placeholder="请输入用户名" @keyup.enter="login">
			      <template #prefix>
			        <img class="icon" src="@/assets/image/user2.png"/>
			      </template>
			    </a-input>
			   </a-form-item>
			   <a-form-item v-bind="validateInfos.password">
			    <a-input-password v-model:value="_d.form.password" placeholder="请输入密码" @keyup.enter="login">
			      <template #prefix>
			        <img class="icon" src="@/assets/image/lock.png"/>
			      </template>
			    </a-input-password>
  			</a-form-item>
  			<a-form-item class="text-center">
  				<a-button :loading="_d.btnLoading" class="sub-btn" type="primary" @click="login()">登录</a-button>
  			</a-form-item>
  		</a-form>
  	</div>
  	<div class="footer">Terms and Conditions Privacy Policy Copyright Reserved @2023</div>

  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {Form, notification} from "ant-design-vue";

	// import {ApiPost} from "@/api/request.js";

	import {useRouter} from "vue-router";
	import {useUserStore} from "@/store/userStore.js";
	
	const router = new useRouter();
	const userStore = useUserStore();

	const formRef = ref();
	const forgetModalRef = ref();
	const _d = reactive({
		btnLoading: false,

		form: {
			code: '',
			password: '',
		},
		 rules: {
		 	code: [
		 		{ required: true, message: '请输入用户名' }
		 	],
		 	password: [
		 		{ required: true, message: '请输入密码' }
		 	]
		 }
	})

	const {resetFields, validate, validateInfos} = Form.useForm(_d.form, _d.rules);
	
	onMounted(() => {
	
	})

	function login() {
		validate().then(() => {
			// _d.btnLoading = true;
			// ApiPost("/Web/userlogin", _d.form).then(res => {
			// 	notification.success({
			// 		message: '提示',
			// 		description: '登录成功'
			// 	});
			// 	userStore.setUserinfo(res.data);
			// 	userStore.setToken(res.data.token);
			// 	router.push({
			// 		path: '/'
			// 	})
			// }).finally(() => {
			// 	_d.btnLoading = false;
			// })
		})
	}

</script>

<style lang="less" scoped>
.login-wp {
	position: relative;
	height: 100vh;
	background: #343541;
	.content {
		position: absolute;
		left: 50%;
		top: 47%;
		margin-top: -210px;
		margin-left: -200px;
		padding: 20px;
		width: 400px;
		height: 430px;
		.logo {
			display: block;
			margin: 0 auto 40px;
			width: 130px;
		}
		.icon {
			margin-right: 10px;
			width: 16px;
		}
		.sub-btn {
			width: 100px;
		}
	}
	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 8px 0;
		line-height: 24px;
		text-align: center;
		color: #fff;
	}
}
</style>